<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>网络问诊</p>
      <div></div>
    </header>
    <div class="container">
      <div class="input-group">
        <input type="text" v-model="question" placeholder="请输入您的需求" class="input-field">
        <button @click="ask" type="ptimary" class="suggestion">获取建议</button>
        <button @click="reset" type="success" class="suggestion">重置</button>
      </div>

      <div class="input-group">
        <div class="">建议:</div>
        <input type="text" v-model="answer" style="display: none;">
        <p class="p">{{ answer }}</p>
      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import Footer from '@/components/Footer.vue';
import { toRefs } from 'vue';

export default {
  name: 'Advice',
  setup() {
    const question = ref('');
    const answer = ref('');
    const loading = ref(false);
    const router = useRouter();

    function ask() {
      if (question.value === '') {
        alert('请输入需求');
      } else {
        loading.value = true;
        console.log(question.value)
        axios.post('api/tjAI/ask', { question: question.value })
          .then(res => {
            answer.value = res.data.result;
            loading.value = false;
            console.log(answer.value)
          })
          .catch(error => {
            console.log('Error', error);
            loading.value = false;
          });
      }
    }

    function reset() {
      question.value = "";
      answer.value = "";
      loading.value = false;
    }

    return {
      question,
      answer,
      loading,
      ask,
      reset
    };
  },
  components: {
    Footer
  }
}
</script>

<style scoped>

header{
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa{
    font-size: 8vw;
}

.container {
  max-width: 600px;
  margin: 35px auto;
  padding: 20px;
  
}

.input-group {
  display: flex;
  align-items:center;
  margin-bottom: 20px;
}

.input-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #161515;
  border-radius: 5px;
}

.suggestion {
  margin-left: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.suggestion[type="primary"] {
  height: 85px;
  background-color: #0b58ab;
  color: white;
}

.suggestion[type="success"] {
  height: 85px;
  background-color: #19be3f;
  color: white;
}

.suggestion:hover {
  opacity: 0.8;
}

.p {
  border: 1px solid
}
</style>